<template>
  <view class="detail-box">
    <view class="detail-title" v-if="title">
      {{ title }}
      <slot name="titleRight"></slot>
    </view>
    <!-- 最简版展示 -->
    <view class="detail-list" v-if="!isCirculate">
      <view class="detail-item" v-for="(item, index) in detailData" :key="index">
        <view class="colum-item" v-if="item.direction==='colum'">
          <view class="label">{{ item.label }}</view>
          <view v-if="item.isImg">
            <u-album space="8" :urls="detailForm[item.key].split(',')"></u-album>
          </view>
          <view v-else>
            <slot v-if="item.valueSlot" :name="item.valueSlot"></slot>
            <view v-else class="value">{{ detailForm[item.key] || '' }}{{ item.unit || '' }}</view>
          </view>
        </view>
        <view class="row-item" v-else>
          <view class="label">{{ item.label }}</view>
          <view class="value">{{ detailForm[item.key] || '' }}{{ item.unit || '' }}</view>
        </view>
      </view>
    </view>
    <!-- 有展开项样式 -->
    <view class="detail-list" v-else>
      <view class="list-box" v-for="(item, index) in detailData" :key="index">
        <view class="list-title" :style="{ paddingBottom: item.showConfig ? 0 : '30rpx' }">
          <view class="title">{{ item.title }}</view>
          <uni-icons type="top" v-if="item.showConfig" color="#bcc0c9" @click="clickChangeShow(item)"></uni-icons>
          <uni-icons type="bottom" v-else color="#bcc0c9" @click="clickChangeShow(item)"></uni-icons>
        </view>
        <view class="config-box" v-if="item.showConfig">
          <view class="circulate-config" v-if="item.configCirculate">
            <view class="config-item" v-for="(cItem, cIndex) in item.circulateConfig" :key="cIndex">
              <view class="config-title">{{ cItem.configTitle }}</view>
                <view class="detail-item" v-for="(ccItem, ccIndex) in cItem.config" :key="ccIndex">
                <view class="colum-item" v-if="ccItem.direction==='colum'">
                  <view class="label">{{ ccItem.label }}</view>
                  <view v-if="ccItem.isImg">
                    <u-album space="8" :urls="detailForm[item.configKey][ccItem.key].split(',')"></u-album>
                  </view>
                  <view v-else class="value">{{ detailForm[item.configKey][ccItem.key] }}</view>
                </view>
                <view class="row-item" v-else>
                  <view class="label">{{ ccItem.label }}</view>
                  <view class="value">{{ detailForm[item.configKey][ccItem.key] }}</view>
                </view>
              </view>
            </view>
          </view>
          <view class="detail-item" v-else v-for="(cItem, cIndex) in item.config" :key="cIndex">
            <view class="colum-item" v-if="cItem.direction==='colum'">
              <view class="label">{{ cItem.label }}</view>
              <view v-if="cItem.isImg">
                <u-album space="8" :urls="detailForm[item.configKey][cItem.key].split(',')"></u-album>
              </view>
              <view v-else class="value">{{ detailForm[item.configKey][cItem.key] }}</view>
            </view>
            <view class="row-item" v-else>
              <view class="label">{{ cItem.label }}</view>
              <view class="value">{{ detailForm[item.configKey][cItem.key] || '暂无数据' }}</view>
            </view>
          </view>
        </view>
        <view class="bottom-line" v-if="index!==detailConfig.length-1"></view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'YouDetail',
    data() {
      return {
        detailData: []
      }
    },
    props: {
      title: {
        type: String,
        default: null
      },
      detailConfig: {
        type: Array,
        default: []
      },
      detailForm: {
        type: Object,
        default: {}
      },
	  //判断是否需要下拉收起详情模块
      isCirculate: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      detailConfig: {
        handler(newVal, oldVal) {
          this.detailData = [...newVal]
        }
      }
    },
    created() {
      this.detailData = [...this.detailConfig]
    },
    methods: {
      clickChangeShow(item) {
        item.showConfig = !item.showConfig
      }
    }
  }
</script>

<style lang="scss" scoped>
  .detail-box {
    border-radius: 16rpx;
    background-color: #FFF;
    overflow: hidden;
  }
  .detail-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 0 30rpx 30rpx;
    border-bottom: 2rpx solid #EEE;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
  }
  .detail-list {
    margin-bottom: 20rpx;
    background-color: #FFF;
    .list-box {
      .list-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 30rpx 0;
        .title {
          font-size: 32rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
        }
      }
      .bottom-line {
        // width: 93%;
        margin: 0 30rpx;
        border-bottom: 2rpx dashed #E0E0E0;
      }
    }
    .circulate-config {
      .config-item {
        .config-title {
          padding: 14rpx 30rpx 0;
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
        }
      }
    }
    .detail-item {
      padding: 20rpx 30rpx;
      // border-bottom: 2rpx solid #EEE;
      &:last-child {
        border-bottom: none;
      }
      &:first-child {
        margin-top: 20rpx;
      }
      .label {
        font-size: 28rpx;
        color: #999999;
      }
      .value {
        font-size: 28rpx;
        color: #333;
      }
      .row-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .value {
          flex: 1;
          margin-left: 10rpx;
          text-align: right;
        }
      }
      .colum-item {
        .label {
          margin-bottom: 8rpx;
        }
        .value {
          min-height: 100rpx;
          font-size: 24rpx;
        }
      }
    }
  }
</style>